<template>
  <div class="detail-container">
    <h1>{{ blog.title }}</h1>
    <div class="aside">
      <span>日期:{{ fromDate(blog.createDate) }}</span>
      <span>浏览:{{ blog.scanNumber }}</span>
      <a href="#data-form-container">评论:{{ blog.commentNumber }}</a>
      <a href=""></a>
      <!-- <a href="">{{ category }}</a> -->
    </div>
    <div v-html="blog.htmlContent" class="markdown-body"></div>
    <!-- v-html 渲染html页面 -->
  </div>
</template>

<script>
import "highlight.js/styles/github.css"
import "@/style/mockDown.css"
import { fromDate } from "@/utils";

export default {
  props: { // 讲子组件的数据传递给父组件
    blog: {
      type: Object, //类型为对象类型
      require: true, // 必填项
    },
  },
  methods: {
    fromDate,
  },
  computed:{
    category(){
      return this.blog.category.name
    }
  },
 
};
</script>

<style lang="less" scoped>
@import url("~@/style/var.less");
.detail-container{
  width: 100%;
  overflow-x: hidden;
}
.markdown-body{
  margin-top: 2em;
}
.aside{
  font-size: 12px;
  color: @gray;
  span,
  a{
    margin-right: 15px;
  }
}
</style>